const CracoLessPlugin = require('craco-less')
const pxtoviewport = require('postcss-px-to-viewport');

module.exports = {
    plugins: [
        {
            // 自定义主题
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: {
                            // 当前less变量是pc库的
                            // '@primary-color': '#1DA57A'
                            // 使用移动端的less变量
                            // https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less
                            '@brand-primary': '#e94f4f',
                            '@brand-primary-tap': '#e94f4f',
                        },
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
    style: {
        postcss: {
          plugins: [
            // https://www.npmjs.com/package/postcss-px-to-viewport
            pxtoviewport({
              // 设计稿的宽度
              viewportWidth: 375,
              // 求vw精确到小数点后几位
              unitPrecision: 3,
              propList: ['*'],
              // propList: ['width', 'font-size', 'margin', 'padding'],
            })
          ]
        }
      }
}
